<template>
  <!-- 用户 -->
  <div class="users">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-button type="primary" size="default" @click="addShow = true"
            >添加用户</el-button
          >
          <el-input
            placeholder="请输入内容"
            v-model="query"
            class="input-with-select"
            @change="puUsers"
          >
            <el-button slot="append" icon="el-icon-search" @click="puUsers"></el-button>
          </el-input></div
      ></el-col>
    </el-row>
    <el-table :data="usersList" style="width: 100%">
      <el-table-column type="index" label="ID" width="40"></el-table-column>
      <el-table-column prop="username" label="姓名"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="mobile" label="电话"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column label="状态"
        ><template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#409EFF"
            inactive-color="#DCDFE6"
            @change="upMgState(scope.row)"
          >
          </el-switch> </template
      ></el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-edit"
            @click="getId(scope.row.id)"
          ></el-button
          ><!--查询需传值 -->

          <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="reUsers(scope.row.id)"
          ></el-button>
          <el-button type="warning" size="medium" icon="el-icon-share"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 5, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="addShow">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="用户名称" label-width="100px" prop="username">
          <el-input v-model="addForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" label-width="100px" prop="password">
          <el-input v-model="addForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px" prop="email">
          <el-input v-model="addForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px" prop="mobile">
          <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="addUsers('addForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改用户" :visible.sync="upShow">
      <el-form :model="upForm" :rules="rules" ref="upForm">
        <el-form-item label="用户名称" label-width="100px" prop="username">
          <el-input v-model="upForm.username" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px" prop="email">
          <el-input v-model="upForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px" prop="mobile">
          <el-input v-model="upForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="upShow = false">取 消</el-button>
          <el-button type="primary" @click="upUsers('upForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
      pagenum: 1,
      pagesize: 5,
      usersList: [],
      total: 0,
      addShow: false,
      upShow: false,
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      upForm: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],
        mobile: [
          { required: true, message: "请输入电话", trigger: "blur" },
          //   {
          //     type: "number",
          //     message: "请输入正确的电话格式",
          //     trigger: ["blur", "change"],
          //   },
        ],
      },
    };
  },
  methods: {
    addUsers(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post("users", this.addForm).then((res) => {
            if (res.data.meta.status == 201) {
              this.$message({
                message: res.data.meta.msg,
                type: "success",
              });
              this.addShow = false;
              this.getUsersList();
            } else {
              this.$message.error(res.data.meta.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    upMgState(obj){
      this.$http.put(`users/${obj.id}/state/${obj.mg_state}`).then(res=>{
        if (res.data.meta.status == 200) {
              this.$message({
                message: res.data.meta.msg,
                type: "success",
              });
              this.getUsersList();
            } else {
              this.$message.error(res.data.meta.msg);
            }
      })
    },
    reUsers(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.delete("users/" + id).then((res) => {
          if (res.data.meta.status == 200) {
            this.$message({
              message: res.data.meta.msg,
              type: "success",
            });
            this.getUsersList();
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
      });
    },
    getId(id) {
      this.$http.get("users/" + id).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          this.upShow = true;
          this.upForm = res.data.data;
        } else {
          this.$message.error(res.data.meta.msg);
        }
      });
    },
    puUsers() {
      this.getUsersList();
    },
    getUsersList() {
      this.$http
        .get(
          `users?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
        )
        .then((res) => {
          this.usersList = res.data.data.users;
          this.total = res.data.data.total;
        });
    },
    upUsers(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.put("users/" + this.upForm.id, this.upForm).then((res) => {
            if (res.data.meta.status == 200) {
              this.$message({
                message: res.data.meta.msg,
                type: "success",
              });
              this.upShow = false;
              this.getUsersList();
            } else {
              this.$message.error(res.data.meta.msg);
            }
          });
        }
      });
    },
    handleSizeChange(value) {
      this.pagesize = value;
      this.getUsersList();
    },
    handleCurrentChange(value) {
      this.pagenum = value;
      this.getUsersList();
    },
  },
  mounted() {
    this.getUsersList();
  },
};
</script>

<style lang="scss">
.index {
  .grid-content {
    display: flex;
    .el-input-group {
      width: 250px;
      margin: 0 8px;
    }
  }
  .el-form-item__content {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
